<template>
  <a-card :bordered="false">
    <div>
      <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
      <a-row :gutter="[8,24]">
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">主体名称:</span>
          <a-input placeholder="请输入主体名称"  style="width: 170px" allowClear v-model="queryParam.companyName"/>
        </a-col>
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">手机号码:</span>
          <a-input placeholder="请输入手机号码"  style="width: 170px" allowClear v-model="queryParam.mobilePhone"/>
        </a-col>
        <template v-if="toggleSearchStatus">
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">是否会员:</span>
          <a-select placeholder="请选择是否会员" style="width: 170px" v-model="queryParam.memberFlag">
            <a-select-option value="1">
              会员
            </a-select-option>
            <a-select-option value="0">
              非会员
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <span style="font-size: 16px;font-weight: bolder">用户状态:</span>
          <a-select placeholder="请选择用户状态" style="width: 170px" v-model="queryParam.userStatus">
            <a-select-option value="0">
              正常
            </a-select-option>
            <a-select-option value="1">
              冻结
            </a-select-option>
          </a-select>
        </a-col>
        </template>

        <a-col :span="6">
          <a-button type="primary" icon="search" @click="loadData">
            查询
          </a-button>
          <a-button type="primary" icon="redo" style="margin-left: 10px">
            重置
          </a-button>
          <a @click="handleToggleSearch" style="margin-left: 8px">
            {{ toggleSearchStatus ? '收起' : '展开' }}
            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
          </a>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="6">
          <a-button type="primary" icon="download"  @click="loadData">
            导出
          </a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1">
                <a-icon type="delete"/>
                删除
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="lock"/>
                冻结
              </a-menu-item>
              <a-menu-item key="3">
                <a-icon type="unlock"/>
                解冻
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-col>
      </a-row>

      <a-row style="margin-top: 30px">
        <a-col :span="24">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table :data-source="tableData"
                   bordered  rowKey="id"
                   :pagination="ipagination"
                   :loading="loading"
                   :row-selection="{ fixed : true,selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
                   :scroll="{ x: 1600 }"
                   @change="handleTableChange">
            <a-table-column title="主体名称" data-index="companyName" align="center"/>
            <a-table-column title="注册手机号" data-index="mobilePhone" align="center" width="120px"/>
            <a-table-column title="注册时间" data-index="registerTime" align="center" width="160px"/>
            <a-table-column title="是否会员" align="center"  width="90px">
              <template slot-scope="text,record,index">
                <a-tag v-if="record.memberFlag == 1" color="green">
                  会员
                </a-tag>
                <a-tag v-else color="red">
                  非会员
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="信息是否完善" align="center" width="120px">
              <template slot-scope="text,record,index">
                <a-tag v-if="record.perfectFlag == 1" color="green">
                  已完善
                </a-tag>
                <a-tag v-else color="red">
                  未完善
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="用户状态" align="center" width="90px">
              <template slot-scope="text,record,index">
                <a-tag v-if="record.userStatus == 0" color="green">
                  正常
                </a-tag>
                <a-tag v-else color="red">
                  冻结
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="信息完善时间" data-index="perfectTime" align="center" width="160px"/>
            <a-table-column title="试用到期时间" data-index="probationTime" align="center" width="160px"/>
            <a-table-column title="购买会员时间" data-index="memberTime" align="center" width="160px"/>
            <a-table-column title="会员到期时间" data-index="memberExpiredTime" align="center" width="160px"/>
            <a-table-column title="操作" fixed="right" align="center" width="130px">
              <template slot-scope="text,record,index">
                <a href="javascript:;" @click="openUpdateModal(record)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </a-table-column>
          </a-table>
        </a-col>
      </a-row>

      <a-modal v-model="updateVisible" title="编辑会员"  width="60%">
        <a-form-model :model="updateForm"  :label-col="labelCol" :wrapper-col="wrapperCol" >
          <a-form-model-item label="主体名称：" >
            <a-input v-model="updateForm.companyName" disabled/>
          </a-form-model-item>
          <a-form-model-item label="注册手机号：" >
            <a-input v-model="updateForm.mobilePhone" disabled/>
          </a-form-model-item>
          <a-form-model-item label="注册时间：" >
            <a-input v-model="updateForm.registerTime" disabled/>
          </a-form-model-item>
          <a-form-model-item label="是否会员：" >
            <a-radio-group v-model="updateForm.memberFlag">
              <a-radio-button :value="1">
                会员
              </a-radio-button>
              <a-radio-button :value="0">
                非会员
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="信息是否完善：" >
            <a-radio-group v-model="updateForm.perfectFlag">
              <a-radio-button :value="1">
                已完善
              </a-radio-button>
              <a-radio-button :value="0">
                未完善
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="信息完善时间：" >
            <a-input v-model="updateForm.perfectTime" disabled/>
          </a-form-model-item>
          <a-form-model-item label="试用到期时间：" >
            <a-input v-model="updateForm.probationTime" disabled/>
          </a-form-model-item>
          <a-form-model-item label="购买会员时间：" >
            <a-input v-model="updateForm.memberTime" disabled/>
          </a-form-model-item>
          <a-form-model-item label="会员过期时间：" >
            <a-input v-model="updateForm.memberExpiredTime" disabled/>
          </a-form-model-item>
          <a-form-model-item label="会员状态：" >
            <a-radio-group v-model="updateForm.userStatus">
              <a-radio-button :value="0">
                正常
              </a-radio-button>
              <a-radio-button :value="1">
                禁用
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
//定义引入的js插件
import {getAction} from '@/api/manage'
export default {
  data() {
    return {
      //定义组件中关联属性
      toggleSearchStatus: false,
      /* 表格绑定数据*/
      tableData:[
        {
          "id": 1,
          "companyName": "aaaa",
          "mobilePhone": "15888888888",
          "password": "demoData",
          "registerTime": "2022-6-13 13:11:38",
          "memberFlag": 1,
          "perfectFlag": 1,
          "perfectTime": "2022-6-13 13:11:38",
          "probationTime": "2022-6-13 13:11:38",
          "memberTime": "2022-6-13 13:11:38",
          "memberExpiredTime": "2022-6-13 13:11:38",
          "delFlag": 1,
          "userStatus": 1,
          "createBy": "demoData",
          "createTime": "2022/6/13 13 11:38",
          "updateBy": "demoData",
          "updateTime": "2022/6/13 13 11:38"
        },
        {
          "id": 2,
          "companyName": "bbbb",
          "mobilePhone": "15888888888",
          "password": "demoData",
          "registerTime": "2022-6-13 13:11:38",
          "memberFlag": 1,
          "perfectFlag": 1,
          "perfectTime": "2022-6-13 13:11:38",
          "probationTime": "2022-6-13 13:11:38",
          "memberTime": "2022-6-13 13:11:38",
          "memberExpiredTime": "2022-6-13 13:11:38",
          "delFlag": 1,
          "userStatus": 1,
          "createBy": "demoData",
          "createTime": "2022/6/13 13 11:38",
          "updateBy": "demoData",
          "updateTime": "2022/6/13 13 11:38"
        }
      ],
      /* 分页条参数 */
      ipagination:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showSizeChanger: true,
        total: 50
      },
      /* table选中行主键值*/
      selectedRowKeys: [],
      /* table选中行数据*/
      selectionRows: [],
      /* 显示加载中特效*/
      loading:false,
      /* 弹窗显示隐藏*/
      updateVisible:false,
      /* 表单控件布局属性*/
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      /* 编辑弹窗回显绑定对象*/
      updateForm:{},
      //页面中所有请求后端接口的url
      url: {
        page: "/user/njtUserRegister/page",
      },
      //分页查询参数对象
      queryParam:{

      },

    }
  },
  methods: {
    //表格自带分页条内容切换时触发事件
    handleTableChange(pagination){
      //将新的分页数据赋值给原分页条数据
      this.ipagination = pagination;
      this.loadData();
    },
    //定义组件事件关联方法
    openUpdateModal(record){
      //将事件传入的表格行对象，浅拷贝赋值给弹窗回显对象
      this.updateForm = Object.assign({},record)
      this.updateVisible = true;
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectedRows;
    },
    onClearSelected(){
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    loadData(){
      //发送后端的参数对象：分页条件参数数据+查询条件参数数据
      //页面搜索条件数据，一般都是直接给参数对象进行双向绑定获取
      //因为分页数据在分页条对象中，所以需要手动操作
      this.queryParam.pageNum = this.ipagination.current;
      this.queryParam.pageSize = this.ipagination.pageSize;
      getAction(this.url.page,this.queryParam).then((resp => {
         this.tableData = resp.result.records;
         this.ipagination.total = resp.result.total;
      }))
    },

  },
  created() {
    //页面加载前执行的操作
    this.loadData();

  }
}
</script>